<script lang="ts" setup>
import { ref, computed, watch } from "vue";
</script>

<template>
	<section class="demo-root">
		<div class="card">
			<h2>React JS<span>Fundamental</span></h2>
			<div>Learn More</div>
		</div>
	</section>
</template>

<style lang="scss" scoped>
.demo-root {
	.card {
		width: 400px;
		height: 400px;
		position: relative;
		border-radius: 40px;
		padding: 40px;
		box-sizing: border-box;
		overflow: hidden;
		box-shadow:
			inset 0px 0px 40px rgba(0, 0, 0, 0.8),
			0px 8px 20px rgba(0, 0, 0, 0.6);
	}

	.card::after {
		content: "";
		position: absolute;
		top: -300px;
		right: -300px;
		bottom: -300px;
		left: -300px;
		background: conic-gradient(
			from 180deg at 50% 50%,
			#12001b -97.5deg,
			#000000 14.05deg,
			#040eff 54.01deg,
			#8000ff 113.42deg,
			#00b6b6 185.62deg,
			#12001b 262.5deg,
			#000000 374.05deg
		);
		filter: blur(60px) brightness(1.5);
		z-index: -1;
		animation: 30s move linear infinite;
	}

	h2 {
		margin: 0;
		padding: 0;
		font-size: 60px;
		letter-spacing: -1px;
		color: #fff;
		text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
	}

	span {
		font-size: 50px;
		font-weight: normal;
		display: block;
	}

	.card > div {
		background-color: rgba(0, 0, 0, 0.5);
		padding: 20px 40px;
		font-size: 32px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		color: #fff;
	}

	@keyframes move {
		from {
			transform: rotate(180deg);
		}
		to {
			transform: rotate(540deg);
		}
	}
}
</style>
